<template>
  <div id="app">
    <header class="header">
      <div class="container">
        <h1 class="logo">
          <i class="icon">📚</i>
          <!-- 前端面试题库 -->
        </h1>
        <nav class="nav">
          <button 
            v-for="category in categories" 
            :key="category.id"
            @click="currentCategory = category.id"
            :class="['nav-btn', { active: currentCategory === category.id }]"
          >
            <i :class="category.icon"></i>
            {{ category.name }}
          </button>
        </nav>
      </div>
    </header>

    <main class="main">
      <div class="container">
        <!-- 搜索和筛选区域 -->
        <div class="search-section">
          <div class="search-box">
            <i class="search-icon">🔍</i>
            <input 
              v-model="searchQuery"
              type="text" 
              placeholder="搜索面试题..."
              class="search-input"
            >
          </div>
          <div class="filters">
            <select v-model="difficultyFilter" class="filter-select">
              <option value="">所有难度</option>
              <option value="初级">初级</option>
              <option value="中级">中级</option>
              <option value="高级">高级</option>
            </select>
            <button @click="showFavoritesOnly = !showFavoritesOnly" 
                    :class="['filter-btn', { active: showFavoritesOnly }]">
              ⭐ 只看收藏
            </button>
            <button @click="showToast('info')" class="action-btn info-btn">
              显示提示消息
            </button>
            <button @click="showToast('success')" class="action-btn success-btn">
              显示成功消息
            </button>
            <button @click="showToast('error')" class="action-btn error-btn">
              显示错误消息
            </button>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats">
          <div class="stat-item">
            <span class="stat-number">{{ filteredQuestions.length }}</span>
            <span class="stat-label">题目</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ favoriteCount }}</span>
            <span class="stat-label">收藏</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ currentCategoryName }}</span>
            <span class="stat-label">当前分类</span>
          </div>
        </div>

        <!-- 面试题列表 -->
        <div class="questions-container">
          <QuestionCard
            v-for="question in filteredQuestions"
            :key="question.id"
            :question="question"
            @toggle-favorite="toggleFavorite"
          />
          
          <div v-if="filteredQuestions.length === 0" class="empty-state">
            <div class="empty-icon">📝</div>
            <h3>没有找到相关题目</h3>
            <p>尝试调整搜索条件或选择其他分类</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import QuestionCard from './components/QuestionCard.vue'
import { questionsData } from './data/questions.js'
import { toast } from './components/Toast.jsx'

export default {
  name: 'App',
  components: {
    QuestionCard
  },
  data() {
    return {
      searchQuery: '',
      currentCategory: 'vue',
      difficultyFilter: '',
      showFavoritesOnly: false,
      questions: questionsData,
      categories: [
        { id: 'vue', name: 'Vue.js', icon: 'vue-icon' },
        { id: 'javascript', name: 'JavaScript', icon: 'js-icon' },
        { id: 'css', name: 'CSS', icon: 'css-icon' }
      ]
    }
  },
  computed: {
    currentCategoryName() {
      const category = this.categories.find(cat => cat.id === this.currentCategory);
      return category ? category.name : '';
    },
    filteredQuestions() {
      let filtered = this.questions.filter(q => q.category === this.currentCategory);
      
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        filtered = filtered.filter(q => 
          q.title.toLowerCase().includes(query) ||
          q.content.toLowerCase().includes(query) ||
          q.tags.some(tag => tag.toLowerCase().includes(query))
        );
      }
      
      if (this.difficultyFilter) {
        filtered = filtered.filter(q => q.difficulty === this.difficultyFilter);
      }
      
      if (this.showFavoritesOnly) {
        filtered = filtered.filter(q => q.favorite);
      }
      
      return filtered;
    },
    favoriteCount() {
      return this.questions.filter(q => q.favorite).length;
    }
  },
  methods: {
    toggleFavorite(questionId) {
      const question = this.questions.find(q => q.id === questionId);
      if (question) {
        question.favorite = !question.favorite;
        
        // 显示收藏状态变更的提示
        const message = question.favorite 
          ? `已收藏: ${question.title}` 
          : `已取消收藏: ${question.title}`;
        toast.info(message, 2000);
      }
    },
    showToast(type) {
      const messages = {
        info: '这是一条提示信息',
        success: '操作成功完成！',
        error: '操作失败，请重试',
        warning: '请注意，这是一条警告'
      };
      
      const positions = ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
      const randomPosition = positions[Math.floor(Math.random() * positions.length)];
      
      switch(type) {
        case 'info':
          toast.info(messages.info, 3000, randomPosition);
          break;
        case 'success':
          toast.success(messages.success, 3000, randomPosition);
          break;
        case 'error':
          toast.error(messages.error, 3000, randomPosition);
          break;
        case 'warning':
          toast.warning(messages.warning, 3000, randomPosition);
          break;
        default:
          toast.info('默认提示消息', 3000, randomPosition);
      }
    }
  },
  mounted() {
    // 组件挂载时显示欢迎提示
    setTimeout(() => {
      toast.info('欢迎使用前端面试题库！', 3000);
    }, 1000);
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8fafc;
  color: #334155;
}

#app {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Styles */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.logo .icon {
  font-size: 1.8rem;
}

.nav {
  display: flex;
  gap: 0.5rem;
}

.nav-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.2);
}

.nav-btn.active {
  background: white;
  color: #667eea;
  font-weight: 500;
}

/* Main Content */
.main {
  padding: 2rem 0;
}

/* Search Section */
.search-section {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}

.search-box {
  position: relative;
  margin-bottom: 1rem;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
}

.filters {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.5rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-btn {
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.filter-btn:hover {
  background: #e2e8f0;
}

.filter-btn.active {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}

/* Action Buttons */
.action-btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.info-btn {
  background-color: #1890ff;
}

.success-btn {
  background-color: #52c41a;
}

.error-btn {
  background-color: #ff4d4f;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #64748b;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Questions Container */
.questions-container {
  display: grid;
  gap: 1.5rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  color: #475569;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: #94a3b8;
}

/* Icons */
.vue-icon::before { content: '💚'; }
.js-icon::before { content: '💛'; }
.css-icon::before { content: '💙'; }

/* Responsive */
@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav {
    width: 100%;
    justify-content: center;
  }
  
  .nav-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select,
  .filter-btn,
  .action-btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .stats {
    grid-template-columns: 1fr;
  }
}
</style>
